<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 数据绑定最常见的形式就是使用{{...}}的文本插值 -->
        <p>{{ message }}</p>

        <!-- 使用 v-text 指令用于输出文本 innerText -->
        <p v-text="message"></p>

        <!-- 使用 v-html 指令用于输出html代码 innerHtml -->
        <p v-html="message"></p>

        <!-- HTML 属性中的值使用 v-bind 指令 -->
        <p>
            <label for="r1">修改颜色</label>
            <input type="checkbox" v-model="use" id="r1">
            <br><br>
            <!-- 以下实例判断 class1 的值，如果为true使用class1类的样式，否则不使用该类 -->
            <div v-bind:class="{'class1': use}">
                v-bind:class 指令
            </div>
        </p>

        <!-- 表达式 -->
        <!-- vue.js 提供了完全的 JavaScript 表达式支持 -->
        <p>
            {{ 5 + 5 }}<br>
            {{ ok ? 'YES' : 'NO' }}<br>
            {{ message.split('').reverse().join('') }}
            <div v-bind:id="'list-' + id">菜鸟教程</div>
        </p>

        <!-- 指令 -->
        <!-- 指令是带有 v- 前缀的特殊属性 -->
        <!-- 指令用于在表达式的值改变时，将某些行为应用到DOM上 -->
        <!-- 这里v-if指令根据表达式seen的值(true或false)来决定是否插入p元素 -->
        <p v-if="seen">现在你看到我了</p>
        <!-- 要绑定的参数在指令后以冒号指明 -->
        <!-- 这里href是要绑定的参数, v-bind 指令将该元素的href属性与表达式url的值绑定 -->
        <pre><a v-bind:href="url">菜鸟教程</a></pre>
        <!-- 另一个例子是 v-on 指令，它用于监听 DOM 事件，参数是监听的事件名 -->
        <p v-on:click="iWasClicked">点我试试</p>

        <!-- 修饰符 -->
        <!-- 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定 -->
        <!-- 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
        <form v-on:submit.prevent="onSubmit"></form>

        <!-- 用户输入 -->
        <!-- 在input输入框中我们可以使用v-model指令来实现双向数据绑定 -->
        <p>
            <p>{{ message }}</p>
            <!-- v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值 -->
            <input v-model="message">
        </p>

        <p>
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转字符串</button>
        </p>

        <!-- 过滤器 -->
        <!-- vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由“管道符 |”指示 -->
        <!-- 过滤器函数接受表达式的值作为第一个参数 -->
        <!-- 过滤器可以串联: {{ message | filterA | filterB }} -->
        <!-- 过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }} -->
        <!-- {{ message | filterA('arg1', arg2) }} 这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。 -->
        <p>{{ message | capitalize }}</p>
        <p v-bind:id="rawId | capitalize"></p>

        <!-- 缩写 -->
        <!-- vue.js 为两个最常用的指令提供了特别的缩写 -->
        <p>
            <!-- 完整语法 -->
            <a v-bind:href="url"></a>
            <!-- 缩写 -->
            <a :href="url"></a>

            <!-- 完整语法 -->
            <a v-on:click="iWasClicked"></a>
            <!-- 缩写 -->
            <a @click="iWasClicked"></a>
        </p>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '<h1>菜鸟教程</h1>',
            use: true,

            ok: true,
            id: 1,

            seen: true,
            url: 'http://www.runoob.com',

            rawId: "nice-1"
        },
        methods: {
            iWasClicked: function () {
                console.log('I was clicked')
            },
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        },
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    })
</script>

</html>